<template>
  <div class="dashboard">
    <!-- 头部标签页 -->
    <div class="dashboard-header">
      <div class="header-tabs">
        <div 
          v-for="tab in headerTabs" 
          :key="tab.key"
          :class="['header-tab', { active: activeTab === tab.key }]"
          @click="activeTab = tab.key"
        >
          <span class="tab-icon">{{ tab.icon }}</span>
          <span class="tab-name">{{ tab.name }}</span>
          <span v-if="tab.count" class="tab-count">{{ tab.count }}</span>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="dashboard-content">
      <!-- 测试分类 -->
      <div class="category-section">
        <div class="category-title">
          <span>测试</span>
          <a href="#" class="category-more">
            <span>更多</span>
            <span class="more-icon">▼</span>
          </a>
        </div>
        <div class="task-grid">
          <div v-for="task in testTasks" :key="task.key" class="task-item" @click="handleTaskClick(task)">
            <div class="task-icon" :style="{ backgroundColor: task.color }">
              {{ task.icon }}
            </div>
            <div class="task-info">
              <div class="task-name">{{ task.name }}</div>
              <div class="task-key">{{ task.key }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 办公分类 -->
      <div class="category-section">
        <div class="category-title">
          <span>办公</span>
          <a href="#" class="category-more">
            <span>更多</span>
            <span class="more-icon">▼</span>
          </a>
        </div>
        <div class="task-grid">
          <div v-for="task in officeTasks" :key="task.key" class="task-item" @click="handleTaskClick(task)">
            <div class="task-icon" :style="{ backgroundColor: task.color }">
              {{ task.icon }}
            </div>
            <div class="task-info">
              <div class="task-name">{{ task.name }}</div>
              <div class="task-key">{{ task.key }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 头部标签页数据
const activeTab = ref('pending');
const headerTabs = [
  {
    key: 'pending',
    name: '待审批的',
    icon: '🔔',
    count: 23
  },
  {
    key: 'applied',
    name: '我申请的',
    icon: '📋'
  },
  {
    key: 'received',
    name: '我收到的',
    icon: '🔊'
  },
  {
    key: 'claimed',
    name: '认领任务',
    icon: '📝'
  },
  {
    key: 'approved',
    name: '已审批的',
    icon: '✅'
  }
];

// 测试分类任务数据
const testTasks = [
  {
    key: 'roleSign',
    name: '角色会签测试',
    icon: '🧩',
    color: '#E6F7FF'
  },
  {
    key: 'testParallel',
    name: '并行测试',
    icon: '🔀',
    color: '#FFF7E6'
  },
  {
    key: 'testTimeout',
    name: '测试连续超时审批',
    icon: '⏱️',
    color: '#F0F9FF'
  },
  {
    key: 'qingjia',
    name: '请假申请',
    icon: '👥',
    color: '#F6FFED'
  }
];

// 办公分类任务数据
const officeTasks = [
  {
    key: 'ccsds',
    name: '测试子流程【主】',
    icon: '📂',
    color: '#FFF7E6'
  },
  {
    key: 'hzqxzx',
    name: '会签自动跳过测试',
    icon: '🧩',
    color: '#E6F7FF'
  },
  {
    key: 'bxcx',
    name: '并行测试',
    icon: '🔀',
    color: '#F0F9FF'
  },
  {
    key: 'asd11',
    name: '路由节点条件测试',
    icon: '👤',
    color: '#F0F9FF'
  },
  {
    key: 'bxtxjj',
    name: '并行条件测试',
    icon: '👤',
    color: '#F0F9FF'
  },
  {
    key: 'zzzzz',
    name: '主管审批测试',
    icon: '👤',
    color: '#F0F9FF'
  },
  {
    key: 'zz123',
    name: '多角色顺序签',
    icon: '👤',
    color: '#E6F7FF',
    isActive: true
  },
  {
    key: 'csccc',
    name: '测试触发器',
    icon: '👤',
    color: '#F0F9FF'
  },
  {
    key: 'yongche',
    name: '用车申请',
    icon: '🚗',
    color: '#FFF7E6'
  },
  {
    key: '23434534',
    name: '访客预约流程',
    icon: '👤',
    color: '#F0F9FF'
  }
];

// 处理任务点击
const handleTaskClick = (task: any) => {
  console.log('Task clicked:', task);
  // 这里可以添加任务点击后的处理逻辑
};

// 组件挂载时的逻辑
onMounted(() => {
  // 可以在这里添加初始化数据加载等逻辑
  console.log('Dashboard mounted');
});
</script>

<style lang="scss" scoped>
.dashboard {
  height: 100%;
  background-color: #f0f2f5;
  padding: 16px;

  // 头部标签页样式
  .dashboard-header {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 0;

    .header-tabs {
      display: flex;
      padding: 0 16px;
      overflow-x: auto;
      white-space: nowrap;

      .header-tab {
        display: flex;
        align-items: center;
        padding: 16px 24px;
        cursor: pointer;
        position: relative;
        color: #666;
        transition: all 0.3s;

        &:hover {
          color: #1890ff;
        }

        &.active {
          color: #1890ff;
          font-weight: 500;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #1890ff;
            border-radius: 1.5px;
          }
        }

        .tab-icon {
          font-size: 18px;
          margin-right: 8px;
        }

        .tab-name {
          font-size: 14px;
        }

        .tab-count {
          background-color: #ff4d4f;
          color: #fff;
          font-size: 12px;
          padding: 0 6px;
          border-radius: 10px;
          margin-left: 8px;
          min-width: 20px;
          text-align: center;
        }
      }
    }
  }

  // 内容区域样式
  .dashboard-content {
    .category-section {
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 16px;
      padding: 16px;

      .category-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;

        span {
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }

        .category-more {
          display: flex;
          align-items: center;
          color: #999;
          font-size: 14px;
          text-decoration: none;

          &:hover {
            color: #1890ff;
          }

          .more-icon {
            font-size: 12px;
            margin-left: 4px;
          }
        }
      }

      .task-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;

        .task-item {
          display: flex;
          align-items: center;
          padding: 12px;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s;
          border: 1px solid #f0f0f0;

          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
            transform: translateY(-1px);
          }

          &.active {
            border: 1px solid #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
          }

          .task-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 12px;
          }

          .task-info {
            flex: 1;
            overflow: hidden;

            .task-name {
              font-size: 14px;
              color: #333;
              margin-bottom: 2px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .task-key {
              font-size: 12px;
              color: #999;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>